<template>
    <div class="list">
        <table width="100%" border-collapse="collapse">
            <tbody>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in contactList" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender|gender }}</td>
                    <td>
                        <a href="javascript:;" @click="see(item.contactId)">查看</a>
                        <a href="javascript:;" @click="edit(item.contactId)">编辑</a>
                        <a href="javascript:;"@click="del(item.contactId)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <pager v-bind="pager" @page-change="pageChange" />
        <div class='foot-bar'><router-link to="/contact/add">添加联系人</router-link></div>
    </div>
</template>
<script>
    import { mapGetters, mapActions} from 'vuex';
    import pager from '../../components/pager';
    export default {
        data(){
            return{};
        },
        created(){
            //console.log(this.$route)
            //console.log(this.$router)
            this.getContactList()
        },
        computed:{
            ...mapGetters([
                'contactList',
                'pager'
            ]),
        },
        methods:{
            ...mapActions([
                'getContactList',
                'deleteContact'
            ]),
            see(contactId){
                //console.log(contactId);
                this.$router.push({name:'contactdetail',params:{contactId}})
            },
            del(contactId){
                let vm = this;
                vm.deleteContact(contactId)
                .then(function(res){
                    alert('删除成功！');
                    //重新查询列表
                    vm.getContactList()
                })
            },
            edit(contactId){
                this.$router.push({name:"contactedit",params:{contactId}})
            },
            pageChange(page){
                console.log("event: page-change:",page);
                this.getContactList({pageNumber:page})
            }
        },
        components:{pager}
    }
</script>
<style scoped>
    .list{text-align:center;  font-size:1em;}
    .list table{}
    .list td{padding:.8em .5em; border-bottom:1px #ccc solid;}
    .foot-bar{padding:1.5em 0; text-align:center;}
</style>